Dag Run and Overview Tab Display Deadlines by imrichardwu · Pull Request #62195 · apache/airflow

imrichardwu · 2026-02-19T23:36:43Z

blocked by #64926

PR scope change, so the branch name is a bit odd, but that's ok.

Implemented Dag run UI and Overview Tab base on the detail's at this PR(#50501 (comment))

Was generative AI tooling used to co-author this PR?

Yes (please specify the tool below)

Read the Pull Request Guidelines for more information. Note: commit author/co-author name and email in commits become permanently public when merged.
For fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
When adding dependency, check compliance with the ASF 3rd Party License Policy.
For significant user-facing changes create newsfragment: {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

This commit introduces a new `FailedIcon` component for representing failure states in the UI, along with a plugin for the DurationChart that visually indicates failed indices. The `FailedIcon` is created using Chakra UI's icon system, while the plugin draws a custom icon on the chart for failed data points.

imrichardwu · 2026-02-20T23:47:15Z

@vincbeck @bbovenzi @ferruzzi Please review :)

ferruzzi · 2026-02-24T00:49:14Z

@pierrejeambrun this is the PR to actually implement that endpoint you modified in #62374, if you can review when you get time.

ferruzzi · 2026-02-24T20:19:45Z

@imrichardwu - As I mentioned on Slack, I love how this looks in the screenshot, but the typescript/React stuff is well outside of my comfort zone to approve so I'll leave that for the others. The rendered result looks great to me though!

pierrejeambrun

Nice PR.

Overall looking good. Just a few suggestions/improvements.

bbovenzi · 2026-02-25T21:24:28Z

I am struggling to understand the UX here.

Adding a failed indicator on the grid run bar. Good call that we are missing a color blind friendly indicator here. But having the icon float above the bar and be a different icon than the "X" we've used for failed isn't the right solution. We could rethink where our run type icons go though.
How many deadlines do we expect to exist on a single dag run at a time? I know the list endpoint has pagination but how often will we actually need it?
The clock above the grid view feels out of context without much other UI for deadlines and deadline alerts.

Let me work on an issue for AIP-86's UI to make sure we are thinking this all through and developing enough API endpoints to support it.

ferruzzi · 2026-02-25T21:46:41Z

How many deadlines do we expect to exist on a single dag run at a time? I know the list endpoint has pagination but how often will we actually need it?

I don't see user having more than a couple. I don't know what the actual average number will be, but my expectation is under 5. That's why I didn't think the pagination was a major miss in his original code, but it can't hurt to have either way.

The rest are UI/UX questions which aren't really my forte, I'll let you artists sort that part out, but I'll keep an eye here in case I can help at all.

bbovenzi · 2026-02-25T21:48:14Z

I wrote up my thoughts over in AIP-86 UI issue.

- Introduce CalendarDeadlines component to display deadlines in the calendar view. - Implement DeadlineAlertsBadge to show alerts related to deadlines in the DAG header. - Create DagDeadlines component for overview page to list upcoming and missed deadlines. - Add DeadlineStatus component to show the status of deadlines in the run details. - Enhance i18n support for new deadline-related strings in dag.json.

…ation

…remove CalendarDeadlines component, and enhance deadline display with new modal and row components.

… limit handling

bbovenzi

Testing this all manually and I find the UX to still be a bit confusing. Let me try to provide some guidance.

Let's move all the python work in this PR to a separate PR that we merge before this. Then we can just focus on the UI here.
We can't rely on the name and description to tell a user what the alerts and deadlines are. We can do a better job of interpreting the reference and interval. For all cases of Met, Pending, and Missed. We should compare the alert's expected vs the dag run's actual. eg "Expected dag run finish: 1 hr after logical date. Actual dag run finish: 2 hours after logical date".
In the dag overview page, let's include the state of the dag run with each deadline so that I can, at a glance, know things like "Running dag with a missed deadline", "Successful run with a missed deadline"

Just showing a dag run id and a date is not sufficient information for a user to know what is going on.

…lerts, and introduce DeadlineStatusModal

… redundant description check

…plify alert retrieval logic

bbovenzi

Thanks for doing the human readable changes. I would still prefer that we split the python and UI changes into separate PRs.

bbovenzi · 2026-04-09T15:55:12Z

This file looks like a mistake?

I split the pr. I should had @ you. And I do not think that is a mistake because the pre commit hook did that. I’m not too sure why cuz I tried getting rid of it every time and it just keeps creating it when I commit. I mention it in my note in the pr because I was kinda confuse why it did that.

Yes, thanks I reviewed this before I saw your other PR.

You can make this one change and skip the pre-commit checks with --no-verify

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Copilot

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 6 comments.

Comments suppressed due to low confidence (1)

airflow-core/src/airflow/serialization/encoders.py:170

This PR is focused on UI changes for displaying DAG run deadlines, but it also modifies core trigger serialization behavior. Since this change is unrelated to the stated scope and could have broad impact on DAG serialization/deserialization, it would be safer to either justify the necessity in the PR description or move it into a separate PR with its own tests/validation.

def encode_trigger(trigger: BaseEventTrigger | dict):
    from airflow.serialization.serialized_objects import BaseSerialization

    def _ensure_serialized(d):
        """
        Make sure the kwargs dict is JSON-serializable.

        This is done with BaseSerialization logic. A simple check is added to
        ensure we don't double-serialize, which is possible when a trigger goes
        through multiple serialization layers.
        """
        if isinstance(d, dict) and Encoding.TYPE in d:
            return d
        return BaseSerialization.serialize(d)

    if isinstance(trigger, dict):
        classpath = trigger["classpath"]
        kwargs = trigger["kwargs"]
    else:
        classpath, kwargs = trigger.serialize()
    return {
        "classpath": classpath,
        "kwargs": {k: _ensure_serialized(v) for k, v in kwargs.items()},
    }

Copilot · 2026-04-11T03:41:38Z

+              {deadlines.map((dl) => {
+                const alert =
+                  dl.alert_name !== undefined && dl.alert_name !== null && dl.alert_name !== ""
+                    ? alertMap.get(dl.alert_name)
+                    : undefined;
+                const deadlineTime = dayjs(dl.deadline_time);


The modal resolves dl.alert_name to a DeadlineAlertResponse via alertMap keyed on alert name. Since DeadlineAlert.name is nullable and not guaranteed unique, this lookup can be incorrect (collisions/overwrites) and show the wrong completion rule. Prefer using a stable identifier (e.g., alert UUID) from the deadline payload to map alerts to deadline instances.

Copilot · 2026-04-11T03:41:38Z

+  const alertMap = new Map<string, DeadlineAlertResponse>();
+
+  for (const alert of alertData?.deadline_alerts ?? []) {
+    if (alert.name !== undefined && alert.name !== null && alert.name !== "") {
+      alertMap.set(alert.name, alert);
+    }
+  }


alertMap is keyed by alert.name and used to resolve deadline instances by dl.alert_name. Since DeadlineAlert.name is not enforced to be unique, this can mis-associate alerts when duplicate names exist. Prefer keying by a stable identifier (alert UUID) and consider updating the deadline API response to include the alert id so the UI can join reliably.

…lines components

imrichardwu requested review from bbovenzi, choo121600, guan404ming, pierrejeambrun, ryanahamilton, shubhamraj-git and vatsrahul1001 as code owners February 19, 2026 23:36

boring-cyborg bot added area:translations area:UI Related to UI/UX. For Frontend Developers. translation:default labels Feb 19, 2026

imrichardwu mentioned this pull request Feb 19, 2026

feat: surface failed-run and missed-deadline indicators in the Grid view and add Deadlines tab to DAG run detail #62188

Closed

2 tasks

pierrejeambrun added this to the Airflow 3.2.0 milestone Feb 25, 2026

pierrejeambrun reviewed Feb 25, 2026

View reviewed changes

imrichardwu marked this pull request as draft February 26, 2026 01:07

vatsrahul1001 modified the milestones: Airflow 3.2.0, Airflow 3.3.0 Mar 24, 2026

Add initial plugin files for AI provider with license information

6c32415

imrichardwu force-pushed the error-ui-frontend branch from 5d348eb to 6c32415 Compare April 2, 2026 16:14

imrichardwu added 3 commits April 2, 2026 10:29

Merge branch 'main' into error-ui-frontend

e6bec47

Add name and description fields to DeadlineAlert and related serializ…

9b2fd64

…ation

imrichardwu marked this pull request as ready for review April 2, 2026 17:22

imrichardwu requested a review from ashb as a code owner April 2, 2026 17:22

imrichardwu changed the title ~~Calendar and Overview Tab Display Deadlines~~ Dag Run and Overview Tab Display Deadlines Apr 2, 2026

imrichardwu added 5 commits April 2, 2026 14:37

Refactor deadline management in DAG UI: update DeadlineAlert fields, …

d42cd59

…remove CalendarDeadlines component, and enhance deadline display with new modal and row components.

Enhance AllDeadlinesModal: add pagination support and update deadline…

af27e2f

… limit handling

Merge branch 'main' into error-ui-frontend

1e8cc1d

Enhance AllDeadlinesModal: increase dialog size and add backdrop padding

83b4e02

Merge branch 'main' into error-ui-frontend

3c14138

imrichardwu requested a review from bbovenzi April 2, 2026 21:42

bbovenzi reviewed Apr 3, 2026

View reviewed changes

Comment thread airflow-core/src/airflow/ui/src/pages/Run/DeadlineStatus.tsx

imrichardwu requested a review from bbovenzi April 3, 2026 19:40

imrichardwu added 2 commits April 6, 2026 13:01

Enhance DeadlineStatus: update icon colors for better visibility

c040737

Merge branch 'main' into error-ui-frontend

001bc71

potiuk added the ready for maintainer review Set after triaging when all criteria pass. label Apr 6, 2026

bbovenzi reviewed Apr 8, 2026

View reviewed changes

bbovenzi mentioned this pull request Apr 8, 2026

Display Deadlines in Dashboard and Browser #64878

Draft

1 task

imrichardwu added 4 commits April 8, 2026 21:36

Enhance Deadline Management: add completion rules, improve deadline a…

1cb841c

…lerts, and introduce DeadlineStatusModal

Merge branch 'main' into error-ui-frontend

60b3edb

Enhance DeadlineAlertsBadge: include alert name in display and remove…

445ce90

… redundant description check

Enhance DeadlineAlertsBadge: display alert name conditionally and sim…

20ee187

…plify alert retrieval logic

bbovenzi reviewed Apr 9, 2026

View reviewed changes

imrichardwu added 2 commits April 9, 2026 10:34

Merge branch 'main' into error-ui-frontend

2b6c629

remove python

fd76b5b

imrichardwu force-pushed the error-ui-frontend branch from 600cb9c to fd76b5b Compare April 9, 2026 16:47

kaxil requested a review from Copilot April 10, 2026 19:55

Copilot AI reviewed Apr 10, 2026

View reviewed changes

imrichardwu requested a review from Copilot April 11, 2026 03:36

Copilot started reviewing on behalf of imrichardwu April 11, 2026 03:36 View session

Copilot AI reviewed Apr 11, 2026

View reviewed changes

imrichardwu added 2 commits April 10, 2026 22:52

UI: Enhance deadline components with additional data handling and props

ea9fd13

UI: Refactor alert handling to use alert IDs instead of names in dead…

a425539

…lines components

imrichardwu force-pushed the error-ui-frontend branch from 8e1fcaa to a425539 Compare April 11, 2026 05:18

Conversation

imrichardwu commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

blocked by #64926

Was generative AI tooling used to co-author this PR?

Uh oh!

imrichardwu commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ferruzzi commented Feb 24, 2026

Uh oh!

ferruzzi commented Feb 24, 2026

Uh oh!

pierrejeambrun left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bbovenzi commented Feb 25, 2026

Uh oh!

ferruzzi commented Feb 25, 2026

Uh oh!

bbovenzi commented Feb 25, 2026

Uh oh!

Uh oh!

bbovenzi left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bbovenzi left a comment

Choose a reason for hiding this comment

Uh oh!

bbovenzi Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

imrichardwu Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bbovenzi Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

bbovenzi Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

imrichardwu commented Feb 19, 2026 •

edited

Loading

imrichardwu commented Feb 20, 2026 •

edited

Loading

imrichardwu Apr 9, 2026 •

edited

Loading